<template>
    <div class="cmp-container">
        <div class="page-title">用户登录统计</div>
        <chart
            xField="dataMonth"
            class="chart"
            :yFields="[{ prop: 'count', name: '用户月登录次数', type: 'bar', label: { show: true, position: 'top' } }]"
            ref="chartRef" />
    </div>
</template>
<script setup>
import Chart from "@/components/chart/index.vue";
import { onMounted } from "vue";

const chartRef = ref();

onMounted(() => {
    app.https.get("/sys/stat/month/login").then((resp) => {
        chartRef.value.reload(resp);
    });
});
</script>

<style lang="scss" scoped>
.chart {
    box-sizing: border-box;
    height: calc(100% - 40px) !important;
}

.cmp-container {
    height: 100%;
}
</style>
